<template>
  <div class="user-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <i class="fas fa-users-cog mr-3"></i>用户管理
          </h1>
          <p class="page-description">管理系统用户账户、角色权限和部门信息</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showCreateDialog">
            <i class="fas fa-user-plus mr-2"></i>新增用户
          </el-button>
          <el-button @click="showDepartmentDialog">
            <i class="fas fa-sitemap mr-2"></i>部门管理
          </el-button>
          <el-button @click="exportUsers">
            <i class="fas fa-file-export mr-2"></i>导出用户
          </el-button>
        </div>
      </div>
    </div>

    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
      <div class="filter-left">
        <el-input
          v-model="filters.keyword"
          placeholder="搜索用户姓名、工号、邮箱..."
          clearable
          class="search-input"
          @input="handleSearch"
        >
          <template #prefix>
            <i class="fas fa-search"></i>
          </template>
        </el-input>
        
        <el-select v-model="filters.role" placeholder="角色筛选" clearable class="filter-select">
          <el-option label="全部角色" value="" />
          <el-option 
            v-for="role in roleOptions" 
            :key="role.value" 
            :label="role.label" 
            :value="role.value" 
          />
        </el-select>
        
        <el-select v-model="filters.department" placeholder="部门筛选" clearable class="filter-select">
          <el-option label="全部部门" value="" />
          <el-option 
            v-for="dept in departments" 
            :key="dept.id" 
            :label="dept.name" 
            :value="dept.id" 
          />
        </el-select>
        
        <el-select v-model="filters.status" placeholder="状态筛选" clearable class="filter-select">
          <el-option label="全部状态" value="" />
          <el-option label="正常" value="active" />
          <el-option label="禁用" value="disabled" />
          <el-option label="离职" value="resigned" />
        </el-select>
      </div>
      
      <div class="filter-right">
        <el-button @click="resetFilters">
          <i class="fas fa-undo mr-1"></i>重置
        </el-button>
      </div>
    </div>

    <!-- 用户列表 -->
    <div class="content-card">
      <el-table 
        :data="filteredUsers" 
        v-loading="loading"
        stripe
        class="user-table"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column label="用户信息" min-width="200">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar :size="40" :src="row.avatar" class="user-avatar">
                <i class="fas fa-user"></i>
              </el-avatar>
              <div class="user-details">
                <div class="user-name">{{ row.name }}</div>
                <div class="user-email">{{ row.email }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="employeeId" label="工号" width="120" sortable />
        
        <el-table-column label="角色" width="120">
          <template #default="{ row }">
            <el-tag :type="getRoleTagType(row.role)" size="small">
              {{ getRoleLabel(row.role) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="department" label="部门" width="120" />
        
        <el-table-column prop="phone" label="联系电话" width="140" />
        
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag 
              :type="getStatusTagType(row.status)" 
              size="small"
            >
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="lastLogin" label="最后登录" width="180" sortable />
        
        <el-table-column prop="createTime" label="创建时间" width="180" sortable />
        
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button 
              size="small" 
              @click="editUser(row)"
              :disabled="row.status === 'resigned'"
            >
              <i class="fas fa-edit mr-1"></i>编辑
            </el-button>
            <el-button 
              size="small" 
              type="warning" 
              @click="resetPassword(row)"
              :disabled="row.status === 'resigned'"
            >
              <i class="fas fa-key mr-1"></i>重置密码
            </el-button>
            <el-dropdown @command="(command) => handleUserAction(command, row)">
              <el-button size="small" type="info">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item 
                    command="disable" 
                    v-if="row.status === 'active'"
                  >
                    <i class="fas fa-ban mr-1"></i>禁用用户
                  </el-dropdown-item>
                  <el-dropdown-item 
                    command="enable" 
                    v-if="row.status === 'disabled'"
                  >
                    <i class="fas fa-check mr-1"></i>启用用户
                  </el-dropdown-item>
                  <el-dropdown-item command="resign">
                    <i class="fas fa-user-times mr-1"></i>办理离职
                  </el-dropdown-item>
                  <el-dropdown-item command="delete" divided>
                    <i class="fas fa-trash mr-1"></i>删除用户
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog
      :title="userDialogTitle"
      v-model="userDialogVisible"
      width="600px"
      :before-close="handleUserDialogClose"
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userFormRules"
        label-width="100px"
        class="user-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="userForm.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="employeeId">
              <el-input v-model="userForm.employeeId" placeholder="请输入工号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userForm.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="userForm.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="角色" prop="role">
              <el-select v-model="userForm.role" placeholder="请选择角色" style="width: 100%">
                <el-option 
                  v-for="role in roleOptions" 
                  :key="role.value" 
                  :label="role.label" 
                  :value="role.value" 
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门" prop="department">
              <el-select v-model="userForm.department" placeholder="请选择部门" style="width: 100%">
                <el-option 
                  v-for="dept in departments" 
                  :key="dept.id" 
                  :label="dept.name" 
                  :value="dept.name" 
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="userForm.status">
            <el-radio label="active">正常</el-radio>
            <el-radio label="disabled">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item v-if="!isEditMode" label="初始密码" prop="password">
          <el-input 
            v-model="userForm.password" 
            type="password" 
            placeholder="请输入初始密码"
            show-password
          />
        </el-form-item>
        
        <el-form-item label="备注">
          <el-input 
            v-model="userForm.remark" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="userDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser" :loading="saveLoading">
          {{ isEditMode ? '更新' : '创建' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 部门管理对话框 -->
    <el-dialog
      title="部门管理"
      v-model="departmentDialogVisible"
      width="500px"
    >
      <div class="department-management">
        <div class="department-header">
          <el-button type="primary" size="small" @click="showCreateDepartment">
            <i class="fas fa-plus mr-1"></i>新增部门
          </el-button>
        </div>
        
        <el-table :data="departments" class="department-table">
          <el-table-column prop="name" label="部门名称" />
          <el-table-column prop="description" label="部门描述" />
          <el-table-column prop="memberCount" label="人员数量" width="100" />
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button size="small" @click="editDepartment(row)">编辑</el-button>
              <el-button 
                size="small" 
                type="danger" 
                @click="deleteDepartment(row)"
                :disabled="row.memberCount > 0"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 部门编辑对话框 -->
    <el-dialog
      :title="departmentDialogTitle"
      v-model="departmentFormVisible"
      width="400px"
    >
      <el-form
        ref="departmentFormRef"
        :model="departmentForm"
        :rules="departmentFormRules"
        label-width="80px"
      >
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="departmentForm.name" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="部门描述" prop="description">
          <el-input 
            v-model="departmentForm.description" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入部门描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="departmentFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDepartment">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'UserManagement',
  setup() {
    const loading = ref(false)
    const saveLoading = ref(false)
    
    // 筛选条件
    const filters = reactive({
      keyword: '',
      role: '',
      department: '',
      status: ''
    })
    
    // 分页
    const pagination = reactive({
      currentPage: 1,
      pageSize: 20,
      total: 0
    })
    
    // 角色选项
    const roleOptions = [
      { label: '管理员', value: 'admin' },
      { label: '律师', value: 'lawyer' },
      { label: '市场部', value: 'marketing' },
      { label: '财务审核', value: 'finance' },
      { label: '鉴定部', value: 'appraisal' }
    ]
    
    // 部门数据
    const departments = ref([
      { id: 1, name: '法务部', description: '负责法律事务处理', memberCount: 15 },
      { id: 2, name: '市场部', description: '负责市场推广和客户开发', memberCount: 8 },
      { id: 3, name: '财务部', description: '负责财务管理和审核', memberCount: 5 },
      { id: 4, name: '鉴定部', description: '负责司法鉴定业务', memberCount: 10 },
      { id: 5, name: '行政部', description: '负责行政管理和人事', memberCount: 6 }
    ])
    
    // 用户数据
    const users = ref([
      {
        id: 1,
        name: '张三',
        employeeId: 'EMP001',
        email: 'zhangsan@law-firm.com',
        phone: '13800138001',
        role: 'admin',
        department: '行政部',
        status: 'active',
        avatar: '',
        lastLogin: '2024-01-20 14:30:25',
        createTime: '2023-06-15 09:00:00',
        remark: '系统管理员'
      },
      {
        id: 2,
        name: '李四',
        employeeId: 'EMP002',
        email: 'lisi@law-firm.com',
        phone: '13800138002',
        role: 'lawyer',
        department: '法务部',
        status: 'active',
        avatar: '',
        lastLogin: '2024-01-20 16:45:12',
        createTime: '2023-08-20 10:30:00',
        remark: '资深律师'
      },
      {
        id: 3,
        name: '王五',
        employeeId: 'EMP003',
        email: 'wangwu@law-firm.com',
        phone: '13800138003',
        role: 'marketing',
        department: '市场部',
        status: 'active',
        avatar: '',
        lastLogin: '2024-01-19 18:20:33',
        createTime: '2023-09-01 14:15:00',
        remark: '市场专员'
      },
      {
        id: 4,
        name: '赵六',
        employeeId: 'EMP004',
        email: 'zhaoliu@law-firm.com',
        phone: '13800138004',
        role: 'finance',
        department: '财务部',
        status: 'disabled',
        avatar: '',
        lastLogin: '2024-01-15 11:30:00',
        createTime: '2023-10-10 09:45:00',
        remark: '财务审核员'
      },
      {
        id: 5,
        name: '孙七',
        employeeId: 'EMP005',
        email: 'sunqi@law-firm.com',
        phone: '13800138005',
        role: 'appraisal',
        department: '鉴定部',
        status: 'active',
        avatar: '',
        lastLogin: '2024-01-20 13:15:22',
        createTime: '2023-11-05 16:20:00',
        remark: '法医鉴定师'
      }
    ])
    
    // 用户对话框
    const userDialogVisible = ref(false)
    const isEditMode = ref(false)
    const userForm = reactive({
      id: null,
      name: '',
      employeeId: '',
      email: '',
      phone: '',
      role: '',
      department: '',
      status: 'active',
      password: '',
      remark: ''
    })
    
    // 部门对话框
    const departmentDialogVisible = ref(false)
    const departmentFormVisible = ref(false)
    const isDepartmentEditMode = ref(false)
    const departmentForm = reactive({
      id: null,
      name: '',
      description: ''
    })
    
    // 表单验证规则
    const userFormRules = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      employeeId: [
        { required: true, message: '请输入工号', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      role: [
        { required: true, message: '请选择角色', trigger: 'change' }
      ],
      department: [
        { required: true, message: '请选择部门', trigger: 'change' }
      ],
      password: [
        { required: true, message: '请输入初始密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
      ]
    }
    
    const departmentFormRules = {
      name: [
        { required: true, message: '请输入部门名称', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入部门描述', trigger: 'blur' }
      ]
    }
    
    // 计算属性
    const filteredUsers = computed(() => {
      let result = users.value
      
      if (filters.keyword) {
        const keyword = filters.keyword.toLowerCase()
        result = result.filter(user => 
          user.name.toLowerCase().includes(keyword) ||
          user.employeeId.toLowerCase().includes(keyword) ||
          user.email.toLowerCase().includes(keyword)
        )
      }
      
      if (filters.role) {
        result = result.filter(user => user.role === filters.role)
      }
      
      if (filters.department) {
        result = result.filter(user => 
          user.department === departments.value.find(d => d.id === filters.department)?.name
        )
      }
      
      if (filters.status) {
        result = result.filter(user => user.status === filters.status)
      }
      
      pagination.total = result.length
      const start = (pagination.currentPage - 1) * pagination.pageSize
      return result.slice(start, start + pagination.pageSize)
    })
    
    const userDialogTitle = computed(() => {
      return isEditMode.value ? '编辑用户' : '新增用户'
    })
    
    const departmentDialogTitle = computed(() => {
      return isDepartmentEditMode.value ? '编辑部门' : '新增部门'
    })
    
    // 方法
    const getRoleLabel = (role) => {
      const option = roleOptions.find(r => r.value === role)
      return option ? option.label : role
    }
    
    const getRoleTagType = (role) => {
      const typeMap = {
        admin: 'danger',
        lawyer: 'primary',
        marketing: 'success',
        finance: 'warning',
        appraisal: 'info'
      }
      return typeMap[role] || ''
    }
    
    const getStatusLabel = (status) => {
      const labelMap = {
        active: '正常',
        disabled: '禁用',
        resigned: '离职'
      }
      return labelMap[status] || status
    }
    
    const getStatusTagType = (status) => {
      const typeMap = {
        active: 'success',
        disabled: 'warning',
        resigned: 'info'
      }
      return typeMap[status] || ''
    }
    
    const handleSearch = () => {
      pagination.currentPage = 1
    }
    
    const resetFilters = () => {
      Object.assign(filters, {
        keyword: '',
        role: '',
        department: '',
        status: ''
      })
      pagination.currentPage = 1
    }
    
    const handleSortChange = ({ column, prop, order }) => {
      // 实际项目中这里应该调用后端API进行排序
      console.log('Sort change:', { column, prop, order })
    }
    
    const handleSizeChange = (size) => {
      pagination.pageSize = size
      pagination.currentPage = 1
    }
    
    const handleCurrentChange = (page) => {
      pagination.currentPage = page
    }
    
    const showCreateDialog = () => {
      isEditMode.value = false
      resetUserForm()
      userDialogVisible.value = true
    }
    
    const editUser = (user) => {
      isEditMode.value = true
      Object.assign(userForm, { ...user, password: '' })
      userDialogVisible.value = true
    }
    
    const resetUserForm = () => {
      Object.assign(userForm, {
        id: null,
        name: '',
        employeeId: '',
        email: '',
        phone: '',
        role: '',
        department: '',
        status: 'active',
        password: '',
        remark: ''
      })
    }
    
    const handleUserDialogClose = (done) => {
      ElMessageBox.confirm('确认关闭？未保存的更改将丢失。')
        .then(() => {
          done()
        })
        .catch(() => {})
    }
    
    const saveUser = async () => {
      // 实际项目中这里应该调用后端API
      saveLoading.value = true
      
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        if (isEditMode.value) {
          const index = users.value.findIndex(u => u.id === userForm.id)
          if (index !== -1) {
            users.value[index] = { ...userForm }
          }
          ElMessage.success('用户更新成功')
        } else {
          const newUser = {
            ...userForm,
            id: Date.now(),
            avatar: '',
            lastLogin: '-',
            createTime: new Date().toLocaleString()
          }
          users.value.unshift(newUser)
          ElMessage.success('用户创建成功')
        }
        
        userDialogVisible.value = false
      } catch (error) {
        ElMessage.error('操作失败')
      } finally {
        saveLoading.value = false
      }
    }
    
    const resetPassword = (user) => {
      ElMessageBox.confirm(`确认重置用户 ${user.name} 的密码？`, '重置密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessage.success('密码重置成功，新密码已发送到用户邮箱')
      })
    }
    
    const handleUserAction = (command, user) => {
      switch (command) {
        case 'disable':
          user.status = 'disabled'
          ElMessage.success('用户已禁用')
          break
        case 'enable':
          user.status = 'active'
          ElMessage.success('用户已启用')
          break
        case 'resign':
          ElMessageBox.confirm(`确认为用户 ${user.name} 办理离职？`, '办理离职', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            user.status = 'resigned'
            ElMessage.success('离职办理完成')
          })
          break
        case 'delete':
          ElMessageBox.confirm(`确认删除用户 ${user.name}？此操作不可恢复。`, '删除用户', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          }).then(() => {
            const index = users.value.findIndex(u => u.id === user.id)
            if (index !== -1) {
              users.value.splice(index, 1)
            }
            ElMessage.success('用户删除成功')
          })
          break
      }
    }
    
    const exportUsers = () => {
      ElMessage.info('导出功能开发中...')
    }
    
    // 部门管理相关方法
    const showDepartmentDialog = () => {
      departmentDialogVisible.value = true
    }
    
    const showCreateDepartment = () => {
      isDepartmentEditMode.value = false
      resetDepartmentForm()
      departmentFormVisible.value = true
    }
    
    const editDepartment = (department) => {
      isDepartmentEditMode.value = true
      Object.assign(departmentForm, department)
      departmentFormVisible.value = true
    }
    
    const resetDepartmentForm = () => {
      Object.assign(departmentForm, {
        id: null,
        name: '',
        description: ''
      })
    }
    
    const saveDepartment = () => {
      if (isDepartmentEditMode.value) {
        const index = departments.value.findIndex(d => d.id === departmentForm.id)
        if (index !== -1) {
          departments.value[index] = { 
            ...departments.value[index], 
            ...departmentForm 
          }
        }
        ElMessage.success('部门更新成功')
      } else {
        const newDepartment = {
          ...departmentForm,
          id: Date.now(),
          memberCount: 0
        }
        departments.value.push(newDepartment)
        ElMessage.success('部门创建成功')
      }
      
      departmentFormVisible.value = false
    }
    
    const deleteDepartment = (department) => {
      if (department.memberCount > 0) {
        ElMessage.warning('该部门还有员工，无法删除')
        return
      }
      
      ElMessageBox.confirm(`确认删除部门 ${department.name}？`, '删除部门', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        const index = departments.value.findIndex(d => d.id === department.id)
        if (index !== -1) {
          departments.value.splice(index, 1)
        }
        ElMessage.success('部门删除成功')
      })
    }
    
    onMounted(() => {
      // 初始化页面数据
      loading.value = true
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
    
    return {
      loading,
      saveLoading,
      filters,
      pagination,
      roleOptions,
      departments,
      users,
      filteredUsers,
      userDialogVisible,
      userDialogTitle,
      isEditMode,
      userForm,
      userFormRules,
      departmentDialogVisible,
      departmentFormVisible,
      departmentDialogTitle,
      isDepartmentEditMode,
      departmentForm,
      departmentFormRules,
      getRoleLabel,
      getRoleTagType,
      getStatusLabel,
      getStatusTagType,
      handleSearch,
      resetFilters,
      handleSortChange,
      handleSizeChange,
      handleCurrentChange,
      showCreateDialog,
      editUser,
      handleUserDialogClose,
      saveUser,
      resetPassword,
      handleUserAction,
      exportUsers,
      showDepartmentDialog,
      showCreateDepartment,
      editDepartment,
      saveDepartment,
      deleteDepartment
    }
  }
}
</script>

<style scoped>
/* 现代化UI样式 - 与系统风格保持一致 */
.user-management {
  background: #f8fafc;
  min-height: 100vh;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.page-description {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 筛选工具栏 */
.filter-toolbar {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.search-input {
  width: 280px;
}

.filter-select {
  width: 150px;
}

/* 内容卡片 */
.content-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

/* 用户表格 */
.user-table {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  flex-shrink: 0;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.user-email {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分页 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

/* 表单样式 */
.user-form {
  padding: 0 16px;
}

/* 部门管理 */
.department-management {
  padding: 0;
}

.department-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}

.department-table {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-management {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .header-actions {
    justify-content: flex-start;
  }
  
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-left {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input,
  .filter-select {
    width: 100%;
  }
  
  .content-card {
    padding: 16px;
  }
}
</style>
